<!DOCTYPE html>
<html lang="en">

<head>
    <%- include('component/login/head') %>
</head>

<body id="register">
<div class="container">
    <div class="row">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
            <header class="mb-5">
                <h3 class="mt-0 white-text">注册</h3>
                <p class="grey-text mb-4">Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！</p>
                <p class="grey-text">npm 的简单结构有助于 Node.js 生态系统的激增，现在 npm 仓库托管了超过 1,000,000 个可以自由使用的开源库包。
                </p>
            </header>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12" id="rer">
            <form action="" method="post" class="tm-signup-form">
                <div class="input-field">
                    <input placeholder="用户名" id="username" name="username" type="text" class="validate"
                           v-model="regis.username">
                </div>
                <div class="input-field">
                    <input placeholder="输入密码" id="password" name="password" type="password" class="validate"
                           v-model="regis.password">
                </div>
                <div class="input-field">
                    <input placeholder="再次输入密码" id="password2" name="password2" type="password" class="validate"
                           v-model="password2" @blur="checkPassword">
                </div>
                <div class="input-field">
                    <input placeholder="邮箱" id="email" name="email" type="email" class="validate" v-model="regis.email">
                </div>
                <div class="input-field">
                    <input placeholder="手机号" id="phone" name="phone" type="tel" class="validate" v-model="regis.phone">
                </div>
                <div class="text-right mt-4">
                    <a href="/" class="waves-effect btn-large btn-large-white px-4 black-text rounded-0">返回首页</a>
                    <button type="button" @click="registerGo"
                            class="waves-effect btn-large btn-large-white px-4 tm-border-radius-0">注册
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

<%- include('component/login/foot') %>
<script>
    const $VXE = VXETable.modal;
    new Vue({
        el: '#rer',
        data: {
            regis: {
                username: '',
                password: '',
                email: '',
                phone: ''
            },
            password2: ''

        },
        methods: {
            registerGo() {
                if (this.checkPassword()){
                    XEAjax.post('/blog.signup', this.regis).then((res) => {
                        if (res.msg === 1) {
                            $VXE.message({message: '注册成功！！5秒后跳转登录', status: 'loading'});
                            setTimeout(() => {
                                location.href = '/blog.login'
                            }, 5000);
                        } else {
                            if (res.errno == '1062') {
                                $VXE.message({message: '该手机号已存在！！', status: 'error'});
                            } else {
                                $VXE.message({message: '注册失败！', status: 'error'});
                            }
                        }
                    }).catch((err) => {
                        $VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), title: '错误', status: 'error'});
                    });
                }
            },
            checkPassword() {
                if (this.regis.password !== this.password2){
                    $VXE.message({message: '第二次密码与第一次密码不符！', title: '错误', status: 'error'});
                }
                return this.regis.password === this.password2;
            }

        },
        created() {


        }

    })


</script>
</body>

</html>
